<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>turntable</title>
</head>
<body>
<div class="container">
    <div class="spinBtn" onclick="aylansun()">抽奖</div>
    <div class="wheel" id="spinBtn">
        <div class="number-container" style="--i:1;--clr:red;"><span>100</span></div>
        <div class="number-container" style="--i:2;--clr:orange;"><span>200</span></div>
        <div class="number-container" style="--i:3;--clr:yellow;"><span>300</span></div>
        <div class="number-container" style="--i:4;--clr:green;"><span>400</span></div>
        <div class="number-container" style="--i:5;--clr:blue;"><span>500</span></div>
        <div class="number-container" style="--i:6;--clr:purple;"><span>600</span></div>
        <div class="number-container" style="--i:7;--clr:pink;"><span>700</span></div>
        <div class="number-container" style="--i:8;--clr:brown;"><span>800</span></div>
    </div>
</div>
<script>
    let wheel = document.querySelector('.wheel');
    let aylankitim = 1;
    let nowattikigradus = 0;

    let mukapat = 1;
    let sani = 8;
    let nowattikitohta = 0;

    function aylansun() {
        let bolak = 360 / sani;
        let tohta = 0;
        if (aylankitim === 5) {
            tohta = mukapat;
            aylankitim = 0;
        } else {
            let tohtaxnumri = () => tohta = Math.ceil(Math.random() * sani);
            tohtaxnumri();
            while (tohta === mukapat) tohtaxnumri();
        }

        let tohtaxgradus = (tohta - nowattikitohta) * bolak;
        nowattikitohta = tohta;
        console.log(nowattikitohta)
        nowattikigradus += (360 * 5) + tohtaxgradus;
        wheel.style.transform = `rotate(${nowattikigradus}deg)`;
        aylankitim++;
    }

    // spinBtn.onclick = function() {

    // reset the wheel
    //     setTimeout(function() {
    //         wheel.style.transform = `rotate(300deg)`; // reset the wheel
    // }
    // , 1000); // wait for 1 second before resetting the wheel
    // }
</script>
</body>
</html>